<template>
  <div v-for="i in menuActionStore.menuActionList" :key="i.id" class="mb-2">
    <Tag severity="danger" value="删除" class="mr-2 cursor-pointer" @click="(event) => handleDelete(event, i)"></Tag>
    <Tag severity="info" :value="i.method" class="mr-2"></Tag>
    <span>{{ i.api }}</span>
  </div>
  <ConfirmPopup />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useConfirm, Tag, ConfirmPopup } from '@/utils/primevue'
import { useField, useForm } from 'vee-validate';
import { useToast } from 'vue-toastification'
import { useMenuActionStore } from '@/stores/menuAction'
import type { TMenuActionItem } from '@/typing/menuAction';


const { handleSubmit } = useForm()
const menuActionStore = useMenuActionStore()
const toast = useToast()
const confirm = useConfirm();


const props = defineProps<{
  menuId: string
}>()

const handleDelete = (event: any, item: TMenuActionItem) => {
  confirm.require({
    target: event.currentTarget,
    message: "你想要删除这条记录吗?",
    icon: "pi pi-info-circle",
    acceptClass: "p-button-danger",
    accept: () => {
      menuActionStore.deleteMenuAction(item.id + '', () => {
        toast.success('删除数据成功～')
        menuActionStore.queryMenuActionList(props.menuId, { force: true })
      })
    },
    reject: () => {
      toast.info("取消删除数据成功～");
    },
  });

}

</script>

<style lang="less" scoped>

</style>
